import React, { useEffect, useState } from 'react';
import { Card, Breadcrumb, Layout, Button, } from 'antd';
import { getAuthList, editAuth, addAuth } from '../../api/auth/index';
import { PlusOutlined } from '@ant-design/icons';
import { AuthsSearchTool, MyTable, ModalForm } from "../../components";

const { Content } = Layout;

function NewService1() {

  const [tableData, setTableData] = useState([]);
  const [modelFormProps, setModelFormProps] = useState({
    visible: false,
    title: '新建权限',
    handleCancel: () => {
      setModelFormProps({ ...modelFormProps, visible: false });
    },
    handleOk: async (type, values) => {
      if (type) {
        await editAuth(values.id, values);
      }else {
        await addAuth(values);
      }
      setModelFormProps({ ...modelFormProps, visible: false });
      const newAuthList = await getAuthList();
      setTableData(newAuthList.data);
    },
    data: {}
  });

  const handleTableEdit = (values) => {
    setModelFormProps({ ...modelFormProps, title: '编辑权限', visible: true, data: values });
  }

  const handleTableDelete = (values) => {
    console.log('删除列表项');
  }

  useEffect(async () => {
    const res = await getAuthList();
    console.log(res.data);
    setTableData(res.data.map((item) => ({ ...item, key: item.id })));
  }, [])

  return (
    <Card>
      <Breadcrumb separator=">">
        <Breadcrumb.Item href="/services">角色管理</Breadcrumb.Item>
        <Breadcrumb.Item href="/services/1">权限管理</Breadcrumb.Item>
      </Breadcrumb>

      <Content style={{ margin: '15px 0' }}>
        <AuthsSearchTool handleSearchFormFinish={(values) => {
          console.log(values);
        }} />

        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setModelFormProps({ ...modelFormProps, visible: true })
          }}>
          新增
        </Button>

        {modelFormProps.visible ? <ModalForm {...modelFormProps} /> : null}

        <MyTable data={tableData}
          title=''
          handleEdit={handleTableEdit}
          handleDelete={handleTableDelete} />

      </Content>
    </Card>
  );
}

export default NewService1;
